import { defineComponent } from 'vue';
import { ElTree } from 'element-plus';
import SvgIcon from '@/components/svg-icon';
import $style from './index.module.scss';

export default defineComponent({
    setup() {
        /**
         * @description 节点结构
         * @type { object }
         */
        const props = {
            label: 'label',
            children: 'children',
            isLeaf: 'leaf',
        };

        /**
         * @description 懒加载获取树节点数据
         * @param {*} node
         */
        const loadNode = (node, resolve) => {

            /* 连接 - 查询 */
            if (node.level === 0) {
                return resolve([
                    {
                        label: '本地MySQL',
                        type: 'connect',
                        svgIcon: 'database-mysql',
                        connectType: 'MySQL',
                    },
                    {
                        label: '阿里云服务器MySQL',
                        type: 'connect',
                        svgIcon: 'database-mysql',
                        connectType: 'MySQL',
                    }
                ]);
            }
            /* 数据库 - 查询 */
            if (node.level === 1) {
                return resolve([
                    {
                        label: 'gzhuafu',
                        type: 'database',
                        svgIcon: 'database-database',
                    },
                    {
                        label: 'huafu',
                        type: 'database',
                        svgIcon: 'database-database',
                    },
                    {
                        label: 'myblog',
                        type: 'database',
                        svgIcon: 'database-database',
                    },
                    {
                        label: 'test',
                        type: 'database',
                        svgIcon: 'database-database',
                    },
                ])
            }
            /* 选项 - 固定 */
            if (node.level === 2) {
                return resolve([
                    {
                        label: '表',
                        type: 'table',
                        svgIcon: 'database-table',
                    },
                    {
                        label: '视图',
                        type: 'view',
                        svgIcon: 'database-view',
                    },
                    {
                        label: '函数',
                        type: 'function',
                        svgIcon: 'database-function',
                    },
                    {
                        label: '查询',
                        type: 'search',
                        svgIcon: 'database-search',
                    },
                    {
                        label: '备份',
                        type: 'backup',
                        svgIcon: 'database-backup',
                    },
                ])
            }
            /* 选项下详情 - 查询 */
            if(node.level === 3){
                // 根据对应的请求
                switch (node.data.type) {
                    case 'table':

                        break;
                    case 'view':

                        break;
                    case 'function':

                        break;
                    case 'search':

                        break;
                    case 'backup':

                        break;

                    default:
                        break;
                }

                return resolve([])
            }
            else{
                return resolve([])
            }
        };

        return () => (<div class={$style.navigationPane}>
            <ElTree props={props} load={loadNode} lazy>{{
                default: ({node, data}) => {
                    return <div class={$style.treeNode}>
                        <SvgIcon name={`${data?.svgIcon}`} />
                        <span>{node.label}</span>
                    </div>
                }
            }}</ElTree>
        </div>)
    }
})